<script setup>
  // 导入组件
  import { ref } from 'vue';
  import BitSelect from './components/BitSelect.vue';

  const val = ref('22') // 默认小红
</script>

<template>
  <div>
    <!-- 使用组件 -->
    <!-- 
      v-model 在组件中等价于 
      :modelValue="val" 数据更新视图（父传子）
      + @update:modelValue="val=newVal" 视图更新数据（子传父）
      $event 是值子组件在 emits 传过来的数据

      这里 :modelValue @update:modelValue 是定义的 只要与子组件匹配到就可以了
    -->
    <BitSelect
      :modelValue="val"
      @update:modelValue="val = $event"
    /> 

    <!-- 与上面那个等价 (前提是内部的属性与事件要写成这个:modelValue @update:modelValue 才可以) -->
    <BitSelect v-model="val"/>
  </div>
</template>


<style scoped></style>